import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_yn_goods/config/app_color.dart';
import 'package:flutter_yn_goods/config/app_routes.dart';
import 'package:flutter_yn_goods/config/app_theme.dart';
import 'package:flutter_yn_goods/config/app_translations.dart';
import 'package:flutter_yn_goods/pages/login/register/register_logic.dart';
import 'package:flutter_yn_goods/user/app_user_manager.dart';
import 'package:flutter_yn_goods/utils/address_service.dart';
import 'package:flutter_yn_goods/utils/loading/loading_utils.dart';
import 'package:flutter_yn_goods/utils/log/utils_log.dart';
import 'package:flutter_yn_goods/utils/utils_other.dart';
import 'package:flutter_yn_goods/widgets/appbar/common_app_bar.dart';
import 'package:flutter_yn_goods/widgets/button/common_button.dart';
import 'package:flutter_yn_goods/widgets/login_input_item_view.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class RegisterPage extends StatelessWidget {
  final logic = Get.put(RegisterLogic());

  @override
  Widget build(BuildContext context) {
    if (kDebugMode) {
      LoadingUtils.dismiss();
    }

    return Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: CommonAppBar(
          leadingImageColor: AppColor.color282828,
          titleColor: AppColor.color282828,
          title: LocaleKeys.account_register.tr,
        ),
        body: Column(
          children: [
            Expanded(child: SingleChildScrollView(
              child: Obx(() {
                return Column(
                  children: [
                    16.verticalSpaceFromWidth,
                    LoginInputItemView(
                      title: LocaleKeys.name.tr,
                      textEditingController: logic.nameEditController,
                      maxLength: logic.lengthLimit,
                      hintText: LocaleKeys.please_enter_name.tr,
                      isRequired: true,
                      // errorText: logic.accountErrorText.value,
                      textChanged: (v) {
                        logic.checkButtonState();
                        logic.registerModelRx.value.name = v;
                        // logic.onAccountTextChange();
                      },
                    ),
                    16.verticalSpaceFromWidth,
                    LoginInputItemView(
                      title: LocaleKeys.phone_number.tr,
                      textEditingController: logic.phoneEditController,
                      maxLength: 11,
                      isRequired: true,
                      keyboardType: const TextInputType.numberWithOptions(),
                      hintText: LocaleKeys.please_enter_phone.tr,
                      errorText: logic.phoneErrorText.value,
                      textChanged: (v) {
                        logic.checkButtonState();
                        logic.registerModelRx.value.phone = v;
                        // logic.onAccountTextChange();
                      },
                    ),
                    16.verticalSpaceFromWidth,
                    // logic.isAgency
                    //     ?
                    LoginInputItemView(
                            title: LocaleKeys.agent_id.tr,
                            textEditingController:
                                logic.agentIdEditController,
                            maxLength: 11,
                            keyboardType:
                                const TextInputType.numberWithOptions(),
                            isRequired: true,
                            hintText: LocaleKeys.please_enter_agent_id.tr,
                            // errorText: logic.phoneErrorText.value,
                            textChanged: (v) {
                              logic.checkButtonState();
                              logic.registerModelRx.value.spread = v;
                              // logic.onAccountTextChange();
                            },
                          ),
                        // : LoginInputItemView(
                        //     title: LocaleKeys.agent_phone.tr,
                        //     textEditingController:
                        //         logic.agentPhoneEditController,
                        //     maxLength: 11,
                        //     keyboardType:
                        //         const TextInputType.numberWithOptions(),
                        //     isRequired: true,
                        //     hintText: LocaleKeys.please_enter_agent_phone.tr,
                        //     // errorText: logic.phoneErrorText.value,
                        //     textChanged: (v) {
                        //       logic.checkButtonState();
                        //       logic.registerModelRx.value.agentPhone = v;
                        //       // logic.onAccountTextChange();
                        //     },
                        //   ),
                    16.verticalSpaceFromWidth,
                    LoginInputItemView(
                      title: LocaleKeys.password.tr,
                      textEditingController: logic.passwordEditController,
                      rightChild: PasswordShowOrHideSwitch(
                        onTap: () {
                          logic.changePasswordState();
                        },
                        show: logic.showPassword.value,
                      ),
                      isRequired: true,
                      obscureText: !logic.showPassword.value,
                      maxLength: logic.lengthLimit,
                      hintText: LocaleKeys.please_enter_password_six.tr,
                      errorText: logic.passwordErrorText.value,
                      textChanged: (v) {
                        logic.onPasswordTextChange();
                        logic.registerModelRx.value.password = v;
                      },
                    ),
                    16.verticalSpaceFromWidth,
                    LoginInputItemView(
                      title: LocaleKeys.confirm_password.tr,
                      textEditingController: logic.passwordAgainEditController,
                      rightChild: PasswordShowOrHideSwitch(
                        onTap: () {
                          logic.changePasswordAgainState();
                        },
                        show: logic.showPasswordAgain.value,
                      ),
                      isRequired: true,
                      obscureText: !logic.showPasswordAgain.value,
                      maxLength: logic.lengthLimit,
                      hintText: LocaleKeys.please_enter_password_six.tr,
                      errorText: logic.passwordAgainErrorText.value,
                      textChanged: (v) {
                        logic.onPasswordTextChange();
                      },
                    ),
                    16.verticalSpaceFromWidth,
                    // _buildSelect(LocaleKeys.delivery_address.tr,
                    //     hintText: LocaleKeys.please_select_address.tr,
                    //     isRequired: true,
                    //     content: logic.addressRx.value, onClick: () {
                    //   AddressService.showVietnamAddressPicker((address, value) {
                    //     // clog('dalskdjlksa   $value');
                    //     // [].;
                    //     logic.addressRx.value = address.join('-');
                    //
                    //     logic.registerModelRx.value.cityName =
                    //         address.join('-');
                    //     logic.registerModelRx.value.province =
                    //         value[0].toString();
                    //     logic.registerModelRx.value.city = value[1].toString();
                    //     logic.registerModelRx.value.area = value[2].toString();
                    //     logic.checkButtonState();
                    //     // [].join('-');
                    //     // [].s
                    //   });
                    // }),

                    // 添加身份证上传组件
                    // 16.verticalSpaceFromWidth,
                    // 身份证正面

                    Visibility(
                        visible: logic.isAgency,
                        child: Column(
                          children: [
                            Row(
                              children: [
                                24.horizontalSpace,
                                Text(
                                  LocaleKeys.id_card_front.tr,
                                  style: TextStyle(
                                      color: AppColor.color282828,
                                      fontSize: 12.sp,
                                      fontWeight: FontWeight.w600),
                                ),
                                4.horizontalSpace,
                                Text(
                                  '*',
                                  style: TextStyle(
                                      color: AppColor.primary,
                                      fontSize: 12.sp,
                                      fontWeight: FontWeight.w600),
                                )
                              ],
                            ),
                            12.verticalSpaceFromWidth,
                            GestureDetector(
                              onTap: () => logic.pickAndUploadIdCardFront(),
                              child: Container(
                                height: 52.w,
                                margin: EdgeInsets.symmetric(horizontal: 24.w),
                                decoration: BoxDecoration(
                                  color: AppColor.colorF5F5F5,
                                  borderRadius: BorderRadius.circular(12.w),
                                ),
                                child: Row(
                                  children: [
                                    Expanded(
                                      child: Padding(
                                        padding: EdgeInsets.symmetric(
                                            horizontal: 16.w),
                                        child: Obx(
                                          () => logic.idCardFrontUploaded
                                                      .value &&
                                                  logic.idCardFrontPath.value
                                                      .isNotEmpty
                                              ? Row(
                                                  children: [
                                                    Icon(
                                                      Icons.check_circle,
                                                      color: AppColor.primary,
                                                      size: 16.w,
                                                    ),
                                                    8.horizontalSpace,
                                                    Text(
                                                      LocaleKeys.uploaded.tr,
                                                      style: TextStyle(
                                                        color: AppColor
                                                            .color282828,
                                                        fontSize: 14.sp,
                                                        fontWeight:
                                                            FontWeight.w500,
                                                      ),
                                                    ),
                                                  ],
                                                )
                                              : Text(
                                                  LocaleKeys.upload_id_card.tr,
                                                  style: TextStyle(
                                                    color: AppColor.color999999,
                                                    fontSize: 14.sp,
                                                    fontWeight: FontWeight.w400,
                                                  ),
                                                ),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      width: 80.w,
                                      height: 52.w,
                                      decoration: BoxDecoration(
                                        color:
                                            AppColor.primary.withOpacity(0.1),
                                        borderRadius: BorderRadius.horizontal(
                                            right: Radius.circular(12.w)),
                                      ),
                                      child: const Icon(
                                        Icons.camera_alt_outlined,
                                        color: AppColor.primary,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),

                            //
                            16.verticalSpaceFromWidth,
                          ],
                        )),

                    Visibility(
                        visible: logic.isAgency,
                        child: LoginInputItemView(
                          title: LocaleKeys.id_card.tr,
                          textEditingController: logic.cardIdEditController,
                          maxLength: 12,
                          keyboardType: const TextInputType.numberWithOptions(),
                          isRequired: true,
                          hintText: LocaleKeys.please_enter_id_card.tr,
                          textChanged: (v) {
                            logic.registerModelRx.value.cardId = v;
                            logic.checkButtonState();
                          },
                        ).marginOnly(bottom: 16.w)),
                    // 16.verticalSpaceFromWidth,
                    LoginInputItemView(
                      title: LocaleKeys.address_detail.tr,
                      textEditingController: logic.addressEditController,
                      maxLength: logic.lengthLimit,
                      isRequired: true,
                      hintText: LocaleKeys.please_enter_address_detail.tr,
                      // errorText: logic.phoneErrorText.value,
                      textChanged: (v) {
                        logic.checkButtonState();
                        logic.registerModelRx.value.address = v;
                        // logic.onAccountTextChange();
                      },
                    ),

                    16.verticalSpaceFromWidth,
                    _buildSelect(LocaleKeys.gender.tr,
                        hintText: LocaleKeys.please_select_gender.tr,
                        // isRequired: true,
                        content: logic.registerModelRx.value.sex != null
                            ? (logic.registerModelRx.value.sex == '0'
                                ? LocaleKeys.female.tr
                                : LocaleKeys.male.tr)
                            : null, onClick: () {
                      Get.toNamed(AppRoutes.modifySex,
                          arguments: {'isInit': true})?.then((value) {
                        if (value is int) {
                          logic.registerModelRx.update((fn) {
                            fn?.sex = value.toString();
                          });
                        }
                      });
                    }),
                    16.verticalSpaceFromWidth,
                    _buildSelect(LocaleKeys.age.tr,
                        hintText: LocaleKeys.please_select_age.tr,
                        // isRequired: true,
                        content: logic.registerModelRx.value.age, onClick: () {
                      logic.showAgePicker(
                          initAge: int.tryParse(
                              logic.registerModelRx.value.age ?? '0'));
                    }),

                    16.verticalSpaceFromWidth,

                    LoginInputItemView(
                      title: LocaleKeys.email.tr,
                      textEditingController: logic.emailEditController,
                      maxLength: logic.lengthLimit,
                      hintText: LocaleKeys.please_enter_email.tr,
                      textChanged: (v) {
                        logic.registerModelRx.value.mail = v;
                        // logic.onPasswordTextChange();
                      },
                    ),

                    // 80.verticalSpaceFromWidth,
                  ],
                );
              }),
            )),

            12.verticalSpaceFromWidth,
            12.verticalSpaceFromWidth,
            Row(children: [
              GestureDetector(
                  onTap: () {
                    logic.agreementRx.value = !logic.agreementRx.value;
                  },
                  behavior: HitTestBehavior.opaque,
                  child: Obx(() {
                    return Container(
                      margin: EdgeInsets.only(left: 12.w),
                      width: 44,
                      height: 44,
                      alignment: Alignment.center,
                      child: Icon(
                        logic.agreementRx.value
                            ? Icons.check_circle
                            : Icons.check_circle_outline,
                        weight: 16.w,
                        color: logic.agreementRx.value
                            ? AppColor.primary
                            : AppColor.color999999,
                      ),
                    );
                  })),
              Expanded(child: RichText(
                  text: TextSpan(
                      style: TextStyle(
                          fontSize: 12.sp, color: AppColor.color282828),
                      children: [
                        TextSpan(
                          text: LocaleKeys.agree_terms.tr,
                        ),
                        TextSpan(
                            text: LocaleKeys.privacy_policy.tr,
                            style: const TextStyle(color: AppColor.primary),
                            recognizer: TapGestureRecognizer()
                              ..onTap = () {
                                Get.toNamed(AppRoutes.agreementPage, arguments:UtilsOther.getPrivacyId() + 3);
                              }),
                        TextSpan(text: LocaleKeys.and.tr),
                        TextSpan(
                            text: LocaleKeys.registration_agreement.tr,
                            style: const TextStyle(color: AppColor.primary),
                            recognizer: TapGestureRecognizer()
                              ..onTap = () {
                                Get.toNamed(AppRoutes.agreementPage, arguments:UtilsOther.getPrivacyId() + 4);
                              }),
                      ])))
            ]),
            // 12.verticalSpaceFromWidth,
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 37.w,
              ),
              child: Obx(() {
                return CommonButton.expend(
                  title: LocaleKeys.register_now.tr,
                  height: 52.w,
                  fontWeight: FontWeight.w600,
                  disableBackgroundColor: Colors.black.withOpacity(0.04),
                  disableTextColor: AppColor.color999999,
                  enable: logic.canRegister.value,
                  onClick: logic.register,
                );
              }),
            ),
            24.verticalSpaceFromWidth,
          ],
        ));
  }

  Widget _buildSelect(String title,
      {bool isRequired = false,
      String? content,
      required String hintText,
      required Function onClick}) {
    return GestureDetector(
      onTap: () {
        onClick.call();
      },
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 24.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Text(
                  title,
                  style: TextStyle(
                      color: AppColor.color282828,
                      fontSize: 12.sp,
                      fontWeight: FontWeight.w600),
                ),
                4.horizontalSpace,
                Visibility(
                    visible: isRequired,
                    child: Text(
                      '*',
                      style: TextStyle(
                          color: AppColor.primary,
                          fontSize: 12.sp,
                          fontWeight: FontWeight.w600),
                    ))
              ],
            ),
            12.verticalSpaceFromWidth,
            Container(
                height: 52.w,
                decoration: BoxDecoration(
                  color: AppColor.colorF5F5F5,
                  borderRadius: BorderRadius.circular(12.w),
                ),
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: Row(
                  children: [
                    Expanded(
                        child: Text(
                            (content ?? '').isNotEmpty
                                ? (content ?? '')
                                : hintText,
                            style: (content ?? '').isNotEmpty
                                ? TextStyle(
                                    color: AppColor.color282828,
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w500)
                                : TextStyle(
                                    color: AppColor.color999999,
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w400))),
                    const Icon(
                      Icons.arrow_forward_ios,
                      size: 16,
                      color: AppColor.color999999,
                    )
                  ],
                ))
          ],
        ),
      ),
    );
  }
}
